<template>
  <div>
    <swiper class="swiper" :options="swiperOption" ref="mySwiper">
      <swiper-slide> <img src="/img/c0a1c8773feb3559220cfc82be499388.jpeg" alt="" /> </swiper-slide>
      <swiper-slide> <img src="/img/4c6c3ef834cb2f8b3b8e9591667062ab.jpeg" alt="" /> </swiper-slide>
      <swiper-slide> <img src="/img/1e8b4520a148ee3998b2dfffdf049c4d.jpeg" alt="" /> </swiper-slide>
      <swiper-slide> <img src="/img/1475053481013.jpg" alt="" /> </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        grabCursor: true,
        //可见图片张数
        slidesPerView: 2,
        // 默认选中中间一张
        centeredSlides: true,
        //无限循环
        loop: true,
        //自动轮播
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
        },

        // notNextTick: true,
        slideToClickedSlide: true,
        on: {
          click: function () {
            //需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法
            const realIndex = this.realIndex
            // 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将 复制的块 的数量计算在内
            //点击可以手动切换轮播图
            vm.$refs.mySwiper.swiper.slideTo(realIndex, 300, false)
          },
        },
        //  direction: 'horizontal',
        //  spaceBetween: 4, // 在slide之间设置距离 也可以是百分比 10%
        //  centeredSlides: true, // 默认选中中间一张
        // observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        // observeParents: true, // 修改swiper的父元素时，自动初始化swiper
      },
    }
  },
  created() {
    // vm = this
  },
}
</script>

<style lang="scss" scoped></style>
